<template>
<!-- 7.21 fys  -->
	<div id="ScenicTickets">
		<div id="ScenicTicketsZT">
			<!-- 面包屑 -->
			<div id="TicketMBX">
				<el-breadcrumb separator-class="el-icon-arrow-right" style="magin-top:10px;" v-for="(o,index) in scenicDetailsList" :key="index">
				<el-breadcrumb-item :to="{ path: '/' }" size="15px">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/ScenicspotDetailsView?id='+ o.id}" size="15px">{{o.scenicName}}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!-- 景区基本信息 -->
			<el-card class="box-xix"  v-for="(o,index) in scenicDetailsList" :key="index">
				<span><font size="6px" color="">{{o.scenicName}}</font></span>
				<span style="margin-left: 250px;">单价</span>
				<span style="font-size: 32px;font-weight: bold;color:#3366CC"><strong size="3px" color="" weight="bold">¥{{o.price}}</strong></span>
				<span style="margin-left:5px;"><font size="4px" color="">/</font></span>
				<span style="margin-left:5px;"><strong size="4px" color="">{{o.openingTime}}</strong></span>
			</el-card>
			<!-- 用户信息 -->
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>取票人信息</span>
				</div>
				<div>
					<el-form :inline="true" :model="orders" :rules="rules" ref="orders" class="demo-form-inline">
						<el-form-item label="姓名" prop="getTicketPerson">
							<el-input v-model="orders.getTicketPerson" placeholder="请输入姓名"></el-input>
						</el-form-item>
						<p></p>
						<el-form-item label="手机号" prop="getTicketPhone">
							<el-input v-model="orders.getTicketPhone" placeholder="请输入手机号码"></el-input>
						</el-form-item>
						<el-form-item label="门票生效时间" prop="startTime">
							<el-date-picker
								v-model="orders.startTime"
								type="date"
								placeholder="选择日期时间"
								align="right"
								:picker-options="expireTimeOPtion">
							</el-date-picker>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
			<el-card class="userRealBinds-card">
				<a href="/#/UserRealBinds" v-show="userRealA">去添加</a>
				<el-table
					ref="multipleTable"
					:data="userRealBindsList"
					tooltip-effect="dark"
					style="width: 100%"
					@selection-change="handleSelectionChange"
					max-height="300px"
					empty-text=" "
					>
					<el-table-column
					type="selection"
					width="55">
					</el-table-column>
					<el-table-column
					prop="realName"
					label="真实姓名"
					width="120">
					</el-table-column>
					<el-table-column
					prop="papersType"
					label="证件类型"
					width="120">
						<template slot-scope="scope">
							<div v-for="item in papersTypeList" :key="item.id">
								<span v-if="item.id === scope.row.papersTypeId">{{item.papersTypeText}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column
					prop="identity"
					label="身份证号"
					show-overflow-tooltip>
					</el-table-column>
					<el-table-column
					prop="phone"
					label="手机号"
					show-overflow-tooltip>
					</el-table-column>
					<el-table-column
					prop="passengerTypeId"
					label="游客类型"
					show-overflow-tooltip>
						<template slot-scope="scope">
							<div v-for="item in passengerTypeList" :key="item.id">
								<el-tag v-if="item.id === scope.row.passengerTypeId">{{item.passengerTypeText}}</el-tag>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<el-empty v-show="empty" description="">
					暂无实名信息，
					<a href="/#/UserRealBinds">去添加</a>
				</el-empty>
			</el-card>
			<!-- 提交 -->
			<el-dialog
			title="请支付"
			:visible.sync="dialogVisible"
			width="30%">
			<span><img src="../../img/易游二维码.png" width="160px" style="margin-left:180px;"></span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="updateStatusqx">暂不支付</el-button>
				<el-button type="primary" @click="updateStatus">确定支付</el-button>
			</span>
			</el-dialog>
		</div>
		<div class="submit_order" v-for="(o,index) in scenicDetailsList" :key="index">
			<font size="5px" style="line-height:80px;margin-left:200px;" color="red">总价格：{{price}} 元</font>
			<el-button type="primary" class="box-sumit" @click="submitForm('orders')">点击提交订单</el-button>
		</div>
	</div>
</template>

<script>
const axios = require('axios')
	export default {
	data () {
		// 验证方法
        let validatorPhone = function (phone, value, callback) {
            //验证手机号的正则表达式
            let reg=/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
            if (value !== '') {
                if (!reg.test(value)) {
                    callback(new Error('输入正确手机号'))
                } else {
                    callback()
                }
            } else {
				callback(new Error('手机号不能为空'))
            }
        }
		return {
			// 去添加状态
			userRealA: true,
			// 空状态
			empty: false,
			// 存放实名信息列表
            userRealBindsList: [],
            multipleSelection: [],
            // 存放当前登录用户Id
            userId: '',
            // 存放游客类型列表
            passengerTypeList: [],
            // 存放证件类型列表
            papersTypeList: [],
			// 景区名称
			scenicName: '',
			loginName: '',
			purchaseTime: "",
			scenicid: this.$route.query.scenicid,//前台接受 景区id
			scenicDetailsList: [],
			price: "",
			code: '',//接收订单编号
			dialogVisible: false,
			active: 1, // 步骤条对象
			// 订单信息对象
			orders: {
				getTicketPerson: '', // 姓名
				identity: '', // 身份证
				// 手机号
				getTicketPhone: '',
				// 门票生效时间
				startTime: ''
			},
			// 验证用户信息
			rules: {
				// 姓名验证
				getTicketPerson: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
					{ min: 2, max: 10, message: '请输入姓名', trigger: 'blur' }
				],
				// 手机号验证
				getTicketPhone: [
					{ validator: validatorPhone, trigger: 'blur'}
				],
				// 门票生效时间
				startTime: [
					{ required: true, message: '请选择门票生效时间', trigger: 'blur' },
				]
			},
			expireTimeOPtion: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 8.64e7;  //如果没有后面的-8.64e7就是不可以选择今天的 
				}
			},
		}
	},
	mounted () {
		this.userId = window.sessionStorage.getItem('id')
		// 初始化渲染实名信息列表
		this.getUserRealBinds()
		// 初始化渲染获取游客类型列别
		this.getPassengerTypeList()
		// 初始化获取证件类型列表
		this.getPapersTypeList()
		this.getScenicDetailsAll() // 初始化方法
		this.loginName = window.sessionStorage.getItem('loginName')
	},
	methods: {
		// table列表信息被选中时触发事件
        handleSelectionChange(val) {
            this.multipleSelection = val
			this.price = this.scenicDetailsList[0].price * this.multipleSelection.length
        },
        // 获取实名信息
        getUserRealBinds () {
            this.$axios.get('http://127.0.0.1:8082/userRealBinds/getUserRealBindsListView', {
                params: {
                    userId: this.userId
                }
            }).then(res => {
                this.userRealBindsList = res.data.obj
				if (this.userRealBindsList.length <= 0) {
					this.empty = true
					this.userRealA = false
				}
            })
        },
		// 获取游客类型列别
		getPassengerTypeList () {
			this.$axios.get('http://127.0.0.1:8082/passengerType/getPassengerTypeList').then(res =>{
				this.passengerTypeList = res.data.obj
			})
		},
		// 获取证件类型列表
		getPapersTypeList () {
			this.$axios.get('http://127.0.0.1:8082/papersType/getPapersTypeList').then(res =>{
				this.papersTypeList = res.data.obj
			})
		},
		// 验证用户信息并添加订单
		submitForm (formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					if (this.multipleSelection.length == 0) {
						this.message('请先选择购票人', 'warning')
					} else {
						var formdata = new FormData()
						formdata.append('loginName', this.loginName)
						formdata.append('getTicketPerson', this.orders.getTicketPerson)
						formdata.append('getTicketPhone', this.orders.getTicketPhone)
						formdata.append('scenicId', this.$route.query.scenicid)
						formdata.append('startTime', this.orders.startTime)
						formdata.append('price', this.price)
						formdata.append('scenicName', this.scenicName)
						formdata.append('userId', this.userId)
						formdata.append('userRealBinds', JSON.stringify(this.multipleSelection))
						console.log(formdata)
						axios.post('http://127.0.0.1:8082/orders/ticket/saveScenicticket', formdata,{indices:false,headers:{'Content-Type':'application/json'}})
						.then(res => {
							if (res.data !== 0) {
								//this.message('恭喜你，保存数据成功！', 'success')
								this.code = res.data.obj.code
								this.$router.push({name : 'Alipay', query:{scenicName: res.data.obj.scenicTicketEntity.scenicName, code: this.code, price: res.data.obj.scenicTicketEntity.price, qrCode: res.data.obj.QrCode}})
							} else {
								this.message('对不起，保存失败！', 'warning')
							}
						})
					}
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		next () {
			if (this.active++ > 2) this.active = 1
			location.reload()
		},
		// 付款完成后进行订单修改
		updateStatus () {
			var formdata = new FormData()
				formdata.append('orderNo', this.code)
				axios.post('http://127.0.0.1:8082/orders/ticket/updateScenicticketStatus', formdata)
					.then(res => {
						if (res.data !== 0) {
							this.message('恭喜你，支付成功！', 'success')
							if (this.active++ > 2) this.active = 1
							this.dialogVisible = false
							location.reload()
						} else {
							this.message('对不起，保存失败！', 'warning')
						}
					})
				},
		updateStatusqx () {
			var formdata = new FormData()
			formdata.append('orderNo', this.code)
			axios.post('http://127.0.0.1:8082/orders/ticket/updateScenicticketStatus1', formdata)
			.then(res => {
				if (res.data !== 0) {
					//this.message('恭喜你，保存数据成功！', 'success')
					if (this.active++ > 2) this.active = 1
					this.dialogVisible = false
					location.reload()
				} else {
					this.message('对不起，保存失败！', 'warning')
				}
			})
		},
		// 查询景区所有信息
		getScenicDetailsAll(){
			this.id = this.scenicid
			this.$axios.get('http://127.0.0.1:8082/scenic/scenicDetailsAllById?id=' + this.id)
			.then((res) => {
				this.scenicDetailsList = res.data.obj
				this.price = 0
				this.scenicName = this.scenicDetailsList[0].scenicName
			})
		},
		message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		}
	}
}
</script>

<style scoped>
#ScenicTickets{
  background-color: rgb(240, 231, 231);
}
.submit_order{
	width:88%;
	height:80px;
	position:fixed;bottom: 0px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
	background-color: white;
	z-index: 1000;
}
#ScenicTicketsZT{
	width:1200px;
	height: 1500px;
	background-color: white;
	padding-left: 30px;
	margin:0 auto;
}
#TicketMBX{
	padding-top: 20px;
}
.box-card{
	width: 1000px;
	float: left;
	margin-top: 30px;
	height: 15%;
	border: 3px solid rgb(240, 231, 231);
}
.userRealBinds-card{
	width: 1000px;
	float: left;
	margin-top: 30px;
	border: 3px solid rgb(240, 231, 231);
}
.box-card1{
	width: 1000px;
	float: left;
	margin-top: 30px;
	height: 14%;
	border: 3px solid rgb(240, 231, 231);
}
.box-sumit{
	width: 300px;
	height: 50px;
	float: right;
	margin-top: 15px;
	margin-right: 230px;
	background-color: red;
}
.box-xix{
	float: left;
	width: 1000px;
	height: 130px;
	margin-top: 20px;
}
.box-xix p{
	margin-top: 10px;
};
</style>
